<style lang="scss" scoped>
  .commonecharts_body {
    margin: 15px 15px 0px 15px;
    h4 {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .echart_container {
      width: 720px;
      /*min-width: 300px;*/
      padding-top:30px ;
      height: 350px;
      border: 1px solid #0f3056;
      box-sizing: border-box;
      background-color: #091f2d;
      border-radius: 3px;
      position: relative;
      .e_t{
        position: absolute;
        right: 100px;
        top: 60px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #87ADE0;
        opacity: 0.5;

      }
    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container" :class="'echart_container_' + commonEchartsObj.echarts_name">
      <slot></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null
      }
    },
    props: {
      commonEchartsObj: {
        type: Object,
        required: true
      },
      percent: {
        type: Boolean,
        required: false
      }
    },
    mounted() {
      this.initEcharts()
    },
    methods: {
      initEcharts() {
        let that = this;
        const Echarts_container = '.echart_container_' + this.commonEchartsObj.echarts_name;
        const myChart = echarts.init(document.querySelectorAll(Echarts_container)[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        const option = {
          animation: false,
          legend: {
            top: 10,
            left:20,
            textStyle: {
              color: '#597bad',
              fontSize: 18,
              padding: [0,0,20,0]
            },
            icon: 'none'
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12 * window.$ratio
            },
            extraCssText: 'z-index:999;',
            backgroundColor: 'rgba(0,0,0,0.7)',
            padding: 10,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: '#1b5070'
              }
            }

          },
//          grid: {
//            left: '0%',
//            right: '4%',
//            top: window.$ratio * 20,
//            bottom: '3%',
//            containLabel: true
//          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.commonEchartsObj.line_date,
            axisLine: {
              lineStyle: {
                color: '#203643'
              }
            },
            axisLabel: {
              fontSize: 18,
              color: '#597bad',
              padding: [10,0,0,0]
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter:(value) => {
                if(value >= 10000){
                  value = (value / 10000) + 'W';
                }
                return value;
              },
              fontSize: 18,
              color: '#597bad'
            },
            axisLine: {
              lineStyle: {
                color: 'transparent'
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color: '#203643'
              }
            },
            minInterval: 1
          },
          series: this.commonEchartsObj.line_list
        };
        console.log(this.commonEchartsObj.line_list);
        myChart.setOption(option);
      }

    },
    watch: {
      'commonEchartsObj': {
        handler(newVal, old) {
          this.initEcharts()
        },
        deep: true
      },
    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
    }
  }
</script>
